/**
 * 卡片弹窗
 *
 * 1. 碎片弹窗
 * 2. 集齐拼图弹窗
 * 3. 额外好礼弹窗
 */

import './index.css';

import { Animate, Image, Popup } from '@nutui/nutui-react';
import { PopupProps } from '@nutui/nutui-react/dist/types/packages/popup';
import React, {
  isValidElement,
  PropsWithChildren,
  useCallback,
  useEffect,
  useMemo,
  useState
} from 'react';

import { apiTaskReceiveCardByGet } from '@/application/apis/task';
import { classNames } from '@/application/utils';
import { render } from '@/application/utils/render';
import { Cards, Task, UserTaskQueryDto } from '@/types/apiType';

interface Props extends PropsWithChildren, Partial<PopupProps> {}
export const PuzzlePieceContent = (props: {
  card: Cards;
  winCards: string;
  onConfirm?: VoidFunction;
  cardsNum: number;
  taskId: number;
  hasPiece: number;
  extra: Task & UserTaskQueryDto;
}) => {
  const { cardsNum = 6, hasPiece = 0, extra, winCards } = props;
  const [front, setFront] = useState<boolean>(false);

  const handleReceive = useCallback(() => {
    props?.onConfirm && props.onConfirm();
  }, []);

  const num = useMemo(() => {
    return hasPiece + Number(`${(winCards || '').split(',').length}`);
  }, [hasPiece, winCards]);

  return (
    <Animate type="ripple" loop={false}>
      <div className=" relative mx-13.5 flex flex-col items-center">
        <div
          className={classNames('card', { click: front })}
          onClick={() => {
            if (!extra?.rewardName) return;
            setFront((prev) => !prev);
          }}
        >
          <div className="front  flex flex-col items-center">
            <Image
              src={new URL('/images/home/gxhdsp.png', import.meta.env.VITE_IMG_BASE_URL).href}
              className="h-7 w-67"
            />
            <div className="relative mt-7.5 h-65 w-58.75">
              <Image
                src={new URL('/images/home/light_beam.png', import.meta.env.VITE_IMG_BASE_URL).href}
                className="!absolute -left-17.5 -top-5 bottom-0 z-10 my-auto w-[375px]"
              />
              <Image
                src={'/images/home/card_bg.png'}
                className="!absolute bottom-0 left-0 right-0 top-0 z-10"
              />
              <div className="absolute bottom-0 left-0 right-0 top-0 z-30 flex  flex-col items-center justify-between pb-7 pt-8.5">
                <div className=" text-[17px] font-medium text-[#105506]">
                  集拼图进度{num}/{cardsNum}
                </div>
                <Image
                  src={props.card.activePicture}
                  style={{ maxHeight: '110px' }}
                  className="mx-7.5 !max-h-[110px]"
                  fit="contain"
                />
                {extra?.rewardName ? <div>翻转查看背后好礼</div> : <div></div>}
              </div>
            </div>
          </div>
          <div className="back flex flex-col items-center">
            <Image
              src={new URL('/images/home/ewhl.png', import.meta.env.VITE_IMG_BASE_URL).href}
              className="h-7 w-67"
            />
            <div className="relative mt-7.5 h-65 w-58.75">
              <Image
                src={new URL('/images/home/light_beam.png', import.meta.env.VITE_IMG_BASE_URL).href}
                className="!absolute -left-17.5 -top-5 bottom-0 z-10 my-auto w-[375px]"
              />
              <Image
                src={new URL('/images/home/card_bg.png', import.meta.env.VITE_IMG_BASE_URL).href}
                className="!absolute bottom-0 left-0 right-0 top-0 z-10"
              />
              <div className="absolute bottom-0 left-0 right-0 top-0 z-30 flex  flex-col items-center justify-between pb-7 pt-8.5">
                <div className=" text-[17px] font-medium text-[#105506]">{extra?.rewardName}</div>
                <Image
                  src={extra?.rewardPicture}
                  className="mx-7.5  max-h-[110px]"
                  style={{ maxHeight: '110px' }}
                  fit="contain"
                />
                <div>翻转查看拼图碎片</div>
              </div>
            </div>
          </div>
        </div>
        <Image
          src={
            new URL('/images/home/btn_kaixinshouxia.png', import.meta.env.VITE_IMG_BASE_URL).href
          }
          className="h-13.76 mt-8.25 w-55"
          onClick={handleReceive}
        />
      </div>
    </Animate>
  );
};

export const CardDialog = (props: Props) => {
  return (
    props.visible && (
      <div
        style={{
          height: '100%',
          display: 'flex',
          width: '100%',
          alignItems: 'center',
          justifyContent: 'center',
          zIndex: '2007',
          position: 'fixed',
          top: '0',
          bottom: '0',
          background: 'rgba(0,0,0,0.3)'
        }}
      >
        {isValidElement(props.children) ? React.cloneElement(props.children, props) : null}
      </div>
    )
  );
};

CardDialog.show = (props: any) => {
  const body = document.body;

  const container = document.createElement('div');
  body.appendChild(container);

  let destroy: VoidFunction = () => undefined;
  const Temp = () => {
    const [visible, setVisible] = useState(false);

    useEffect(() => {
      setVisible(true);
    }, []);

    destroy = () => {
      setVisible(false);
    };
    return (
      <CardDialog
        {...props}
        onClose={() => {
          setVisible(false);
        }}
        onConfirm={() => {
          setVisible(false);
          props?.onConfirm && props?.onConfirm();
        }}
        visible={visible}
      >
        {props.children}
      </CardDialog>
    );
  };
  render(<Temp />, container);

  return destroy;
};
